<template>
  <div class="content">
    <div class="song-lyric">
      <h2>歌词</h2>
      <transition name="lyr-fade">
        <!--有个词-->
        <div v-show="lyr.length" key="has-lyr">
          <ul :style="{top:lrcTop}"  class="lrc">
            <li class="lyric" v-for="(item, index) in lyr" v-bind:key="index">
              {{ item[1] }}
            </li>
          </ul>
        </div>
        <!--没歌词的情况-->
        <div v-show="!lyr.length" class="no-lyric" key="no-lyr">
          <span class="no-lrc">暂无歌词</span>
        </div>
      </transition>
    </div>

    <play-control :songInfo="songInfo"/>
  </div>
</template>

<script>

import PlayControl from './PlayControl'
import { mapGetters } from 'vuex'
export default {
  name: 'player-page',
  data () {
    return {
      lrcTop: 200 + 'px', // 歌词滑动
      showLrc: false, // 切换唱片和歌词
      lyr: [], // 当前歌曲的歌词
      songInfo: {}
    }
  },
  components: {
     PlayControl
  },
  computed: {
    ...mapGetters([
      'curTime',
      'lyric', // 歌词
    ])
  },
  watch: {
    // 播放时间的开始和结束
    curTime: function () {
      // 处理歌词位置及颜色
      if (this.lyr.length !== 0) {
        for (var i = 0; i < this.lyr.length; i++) {
          if (this.curTime >= this.lyr[i][0]) {
            for (var j = 0; j < this.lyr.length; j++) {
              document.querySelectorAll('.lrc li')[j].style.color = '#000'
              document.querySelectorAll('.lrc li')[j].style.fontSize = '15px'
            }
            if (i >= 0) {
              // this.lrcTop = -i * 30 + 180 + 'px'
              document.querySelectorAll('.lrc li')[i].style.color = '#95d2f6'
              document.querySelectorAll('.lrc li')[i].style.fontSize = '25px'
            }
          }
        }
      }
    }
  },
  created () {
    // 获得歌曲的信息
    this.songInfo = this.$route.params.songInfo
    this.lyr = this.parseLyric(this.songInfo.lyric)

    this.$store.commit('setIsPlay', true)
    window.sessionStorage.setItem('isPlay', JSON.stringify(true))
  },
  methods: {
    parseLyric (text) {
      console.log(typeof text)
      var lines = text.split('\n'),
              pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g,
              result = []
      // console.log(lines)
      console.log("正则表达式解析后的歌词")
      while (!pattern.test(lines[0])) {
        lines = lines.slice(1)
        console.log(lines)
      };
      // console.log(lines.length)
      lines[lines.length - 1].length === 0 && lines.pop()
      console.log("-------歌词-------")
      for (let item of lines) {
        // console.log(item)
        let time = item.match(pattern) // 存前面的时间段
        let value = item.replace(pattern, '') // 存歌词
        // console.log("时间：" + time) // 时间
        // console.log("歌词：" + value) // 歌词数据
        for (let item1 of time) {
          var t = item1.slice(1, -1).split(':')
          if (value !== '') {
            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value])
          }
        }
      }
      result.sort(function (a, b) {
        return a[0] - b[0]
      })
      console.log(result)
      return result
    },
  }
}
</script>

<style scoped>
.content {
  padding: 50px 0;
  flex: 1;
}
.song-lyric {
  margin: auto;
  width: 700px;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 0 20px 50px 20px;
}
.lyr-fade-enter,
.lyr-fade-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
.lyc-fade-enter-active,
.lyc-fade-leave-active {
  transition: all .3s ease;
}
.lrc {
  font-size: 18px;
  padding: 30px 0;
  width: 100%;
  text-align: center;
  list-style: none;
}
.lyric {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.no-lyric {
  margin: 150px 0;
  width: 100%;
  text-align: center;
}
.no-lrc {
  font-size: 30px;
  text-align: center;
}
h2 {
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid black;
}

</style>
